import { Loader2 } from 'lucide-react';

interface IframeLoaderProps {
  url: string;
  name?: string;
}

/**
 * IframeLoader 组件
 * 用于加载外部应用到 iframe 中
 */
export default function IframeLoader({ url, name = '外部应用' }: IframeLoaderProps) {
  return (
    <div className="h-[calc(100vh-8rem)]">
      <div className="mb-4">
        <h1 className="text-2xl font-bold">{name}</h1>
        <p className="text-sm text-muted-foreground">正在加载: {url}</p>
      </div>
      <div className="relative h-[calc(100%-4rem)] overflow-hidden rounded-lg border bg-background">
        {/* 加载指示器 */}
        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
          <div className="text-center">
            <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
            <p className="mt-4 text-sm text-muted-foreground">加载中...</p>
          </div>
        </div>
        
        {/* Iframe */}
        <iframe
          src={url}
          className="relative z-20 h-full w-full border-0"
          title={name}
          sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
          onLoad={(e) => {
            // 隐藏加载指示器
            const loader = e.currentTarget.previousElementSibling;
            if (loader) {
              (loader as HTMLElement).style.display = 'none';
            }
          }}
        />
      </div>
    </div>
  );
}

